<template>
  <div class="wrape-content">
    <div class="top">
      <img src="../assets/user-image/location.png" alt="位置">
      <span>您当前所在的位置：用户管理</span>
    </div>
    <div class="content">
      <div class="form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="auto"
          class="ruleForm"
        >
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="cellphone">
            <el-input v-model.number="ruleForm.cellphone" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="行政级别" prop="level">
            <el-select v-model="ruleForm.level" placeholder="行政级别" @change="changeSelect">
              <el-option label="省" value="省"></el-option>
              <el-option label="市" value="市"></el-option>
              <el-option label="县" value="县"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="行政区域" prop="area_code">
            <el-cascader v-model="ruleForm.area_code" placeholder="请选择行政区域" :options="citys"></el-cascader>
          </el-form-item>
          <section class="opreation opleft">
            <el-button class="serchbtn" @click="submitForm('ruleForm')">查询</el-button>
            <el-button class="restbtn" @click="resetForm('ruleForm')">重置</el-button>
          </section>
        </el-form>

        <section class="opreation">
          <el-button type="primary" class="feicuilu addbtn" @click="addUser">
            <img src="../assets/add.png">新增
          </el-button>
          <el-button
            v-if="false"
            :disabled="userid.length==0"
            type="primary"
            :class="[userid.length==0?'noactive':'feicuilu', 'exportbtn']"
            style="vertical-align:top"
            @click="exportData"
          >
            <img src="../assets/export.png">导出
          </el-button>
          <el-button
            :disabled="userid.length==0"
            type="danger"
            class="deletebtn"
            @click="handDelete(null)"
          >
            <img src="../assets/delete_left.png"> 删除
          </el-button>
        </section>
      </div>
      <div class="Table">
        <el-table
          :height="height"
          style="width:97%; margin:0 auto"
          :row-class-name="tableRowClassName"
          :cell-class-name="rowClass"
          :data="tableData"
          border
          background="rgb(235,245,255)"
          @selection-change="handleSelectionChange"
        >
          >
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column
            v-for="(item,index) in tableHeaderData"
            :key="index"
            :show-overflow-tooltip="true"
            :width="item.width"
            :prop="item.prop"
            :label="item.label"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center" width="110">
            <template slot-scope="scope">
              <div class="actionbtn" style=" background:#000000">
                <img @click="detailUser(scope.row)" src="../assets/details.png" title="详细信息">
              </div>
              <div class="actionbtn" style="background:#24B3B3">
                <img @click="upDataUser(scope.row)" src="../assets/edit.png" title="修改">
              </div>
              <div class="actionbtn" style="background:#F56262">
                <img @click="handDelete(scope.row)" src="../assets/delete_right.png" title="删除">
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current_page"
        :page-sizes="[15, 50, 100]"
        :page-size="15"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <AddUpdata
      v-if="dialogVisible"
      :dialogVisible="dialogVisible"
      :dialogtype="dialogtype"
      @closedialog="closedialog"
      @repeate="repeate"
    ></AddUpdata>
  </div>
</template>

<script>
import AddUpdata from "./AddUpdata";
import bus from "../publicJS/bus";
import publicJS from "../publicJS/publicData";
import { type } from "os";
export default {
  components: {},
  props: {},
  data() {
    var Rgecellphone = (rules, value, callback) => {
      console.log(value);
      let reg = /^1(3|4|5|7|8|6|9)\d{9}$/;
      if (!reg.test(value) && value != undefined) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    return {
      city: publicJS.city,
      height: 690 + "px",
      citys: [],
      total: 10,
      per_page: 15, // 每页多少数量
      current_page: 1, // 当前页
      userid: [], // 删除用户的id
      ruleForm: {},
      rules: {
        cellphone: [
          {
            validator: Rgecellphone,
            trigger: "blur"
          },
          { type: "number" }
        ]
      },
      dialogtype: {},
      dialogVisible: false,
      tableHeaderData: [
        {
          prop: "dataindex",
          label: "序号",
          width: "60"
        },
        {
          prop: "name",
          label: "用户姓名"
        },
        {
          prop: "cellphone",
          label: "电话号码"
        },
        {
          prop: "level",
          label: "行政级别"
        },
        {
          prop: "area_name",
          label: "行政区域"
        },
        {
          prop: "unit_type",
          label: "单位类型"
        },
        {
          prop: "disabled",
          label: "状态"
        },
        {
          prop: "remark",
          label: "备注"
        }
      ],
      tableData: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.getUserData();
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.ruleForm = {};
      this.current_page = 1;
      this.citys = JSON.parse(JSON.stringify(this.city));
    },
    addUser() { // 增加用户时 初始化 参数
      this.dialogVisible = true;
      this.dialogtype = {};
      this.dialogtype.adduser = true;
      this.$store.commit("clearruleform");
    },
    exportData() {
      let id = [];
      id = this.userid.map(item => {
        return item.id;
      });
      this.$ajax
        .get("/index.php/system/hqlrole/exportUsers", {
          params: { ids: id }
        })
        .then(res => {
          window.open(res.request.responseURL);
        });
    },
 
    handDelete(row) { //删除用户获取row对象
      if (row) {
        this.confirm(`删除用户名为${row.name}的用户`, () => {
          let id = [];
          id.push(row.id);
          this.deleteUser(id);
        });
      } else {
        this.confirm(`删除所选的${this.userid.length}个用户`, () => {
          let id = [];
          id = this.userid.map(item => {
            return item.id;
          });
          this.deleteUser(id);
        });
      }
    },
    deleteUser(id = []) {
      // 删除用户
      this.$ajax
        .post("/index.php/system/hqlrole/batchDeleteUsers", { ids: id })
        .then(res => {
          console.log(res);
          this.messages(res.data.code, res.data.msg);
          this.getUserData();
        })
        .catch();
    },
    handleSelectionChange(value) {
      this.userid = value;
      console.log(this.userid);
    },
    detailUser(row) {
      //查看用户
      this.dialogVisible = true;
      this.dialogtype = {};
      this.dialogtype.detailuser = true;
      console.log("详情行数据", row);
      this.$store.commit("setruleform", row);
      // bus.$emit('postuserData', row);
    },
    upDataUser(row) {
      // 修改用户
      this.dialogVisible = true;
      this.dialogtype = {};
      this.dialogtype.upDatauser = true;
      this.$store.commit("setruleform", row);
      //bus.$emit('postuserData', row);
    },
    changeSelect(value) {
      // 行政级别改变
      console.log(value);
      this.citys = JSON.parse(JSON.stringify(this.city));
      if (value == "市") {
        this.citys = this.citys[0].children.filter(res => {
          return delete res.children;
        });
      } else if (value == "县") {
        this.citys = this.citys[0].children;
      } else if (value == "省") {
        this.citys = [{ id: 1, value: "430000", label: "湖南省" }];
      }
    },
    handleSizeChange(per_page) {
      this.per_page = per_page;
      this.getUserData();
    },
    handleCurrentChange(current_page) {
      this.current_page = current_page;
      this.getUserData();
    },
    closedialog(dialog) {
      this.dialogVisible = dialog;
    },
    repeate() {
      this.getUserData();
    },
    getUserData() {
      let param = {
        per_page: this.per_page,
        current_page: this.current_page,
        name: this.ruleForm.name,
        cellphone: this.ruleForm.cellphone,
        level: this.ruleForm.level,
        area_code: this.ruleForm.area_code
      };
      this.$ajax
        .post("/index.php/system/hqlrole/queryUsers", param)
        .then(res => {
          console.log(res);
          if (res.data.code == 1) {
            this.tableData = res.data.msg.data.map((item, index) => {
              item.dataindex = index + 1;
              return item;
            });
            this.total = res.data.msg.total;
            console.log(this.tableData);
          } else {
            this.total = 0 
            this.tableData = []
            this.messages(0, res.data.msg);
          }
        })
        .catch(err => {});
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "grayrow";
      }
    },
    rowClass({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 7) {
        return "disabledrow";
      }
    },
    confirm(text, fn) {
      this.$confirm(`${text}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          fn();
        })
        .catch(() => {
          return false;
        });
    },
    messages(code, text) {
      if (code == 1) {
        this.$confirm(text, "提示", {
          confirmButtonText: "确定",
          type: "success"
        });
      } else {
        this.$confirm(text, "提示", {
          confirmButtonText: "确定",
          type: "error"
        });
      }
    }
  },
  components: { AddUpdata },
  created() {
    this.height = window.screen.height - 225 + "px";
    console.log("Tbale 高度" + this.height);

    this.getUserData();
    this.citys = JSON.parse(JSON.stringify(this.city));
  },
  mounted() {}
};
</script>
<style lang="stylus" scoped>
.wrape-content {
  flex: 1;
  background: rgb(241, 242, 247);
  padding: 0% 1.1%;
}

.content {
  background: white;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.05);
  padding-bottom: 40px;
}

.top {
  background: white;
  font-size: 13px;
  margin-bottom: 12px;
  color: #4D4D4D;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.05);
  line-height: 35px;
  padding-left: 5px;

  span {
    margin-left: 5px;
  }
}

.form, .ruleForm >>> {
  .el-form-item__label-wrap {
    margin-left: 15px;
  }
}

.ruleForm {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0 auto;

  .el-form-item {
    margin-bottom: 0px;
    margin-top: 9px;
    flex: 0 0 25%;
  }
}

.ruleForm >>> {
  .el-input__inner {
    height: 35px;
  }

  .el-cascader {
    line-height: 0px;
    display: block;
  }

  .el-select {
    width: 91%;
  }
}

.Table {
  margin-top: 9px;
  border-top: 1px solid #E5E5E5;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.05);
}

.Table >>> {
  .el-table {
    th {
      background-color: rgba(235, 240, 255, 1) !important;
      padding: 8px 0;
    }
  }
}

.Table >>> {
  .el-table__body-wrapper {
    td {
      padding: 7.5px;
    }
  }
}

.el-pagination {
  padding: 1.1%;
  display: flex;
  justify-content: center;
  background: #F5F8FF;
}

.Table >>> {
  .el-table {
    .cell {
      padding: 0px;
    }
  }
}

.addbtn img, .exportbtn img, .deletebtn img {
  padding-right: 5px !important;
  vertical-align: bottom !important;
}

.ruleForm >>> {
  .el-form-item__content {
    line-height: 30px !important;
    margin-left: 72px !important;
  }
}

.el-table {
  margin-top: 11px !important;
}

.opreation {
  justify-self: start;
  margin-top: 10px;
  margin-left: 19px;
}

.noactive {
  background: #7CD1D1 !important;
}

.Table >>> {
  .grayrow {
    background: #FAFAFA !important;
  }
}

.ruleForm >>> {
  .el-form-item:nth-child(1) {
    .el-form-item__label-wrap {
      margin-left: 24px !important;
    }
  }
}

.Table >>> {
  .disabledrow {
    color: #24B3B3;
  }
}

.ruleForm>>> {
  .el-form-item {
    .el-input__inner:focus {
      border-color: #24B3B3;
      outline: 0;
    }
  }
}

.serchbtn {
  color: white;
  background: #24B3B3;
}

.serchbtn:hover {
  background: #1A9595;
  color: white;
}

.opleft {
  margin-right: 15px;
}

.ruleForm >>> {
  .el-form-item {
    .el-input {
      width: 87%;
    }
  }
}

.actionbtn {
  display: inline-block;
  width: 23px;
  height: 23px;
  padding: 2px 1px;
  margin-left: 5px;
  border-radius: 5px;
  cursor: pointer;
}
</style>